<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DateSlider</title>
<!--
	来源于：http://ghusse.github.io/jQRangeSlider/
    在此基础上进行修改
    author:SM
    desc:日期拖拽组件
-->
<link href="css/dateSlider.css" type="text/css" rel="stylesheet"/>
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/jquery.ui.js"></script>
<script language="javascript" src="js/DateSlider.js"></script>

 <script type="text/javascript">
   	var Months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
   	$(function(){
		createDemos();		
	});
	
	function createDemos(){		
		
		
		var	date = $("<div id='date' />").appendTo($("#dateSlider"));//渲染日期组件
		var dateSilderObj=date.dateRangeSlider({
			arrows:false,//是否显示左右箭头
			bounds: {min: new Date(2013, 7, 1), max: new Date(2014, 6, 31, 12, 59, 59)},//最大 最少日期
			defaultValues: {min: new Date(2014, 1, 23), max: new Date(2014, 4, 23)}//默认选中区域
			,scales:[{
					first: function(value){return value; },
					end: function(value) {return value; },
					next: function(val){
						var next = new Date(val);
						return new Date(next.setMonth(next.getMonth() + 1));
					 },
					label: function(val){
						return Months[val.getMonth()];
					},
					format: function(tickContainer, tickStart, tickEnd){
						tickContainer.addClass("myCustomClass");
					}
			}]
			
					
		});//日期控件
		
		//重新赋值（整个时间轴）
		dateSilderObj.dateRangeSlider("bounds", new Date(2013, 8, 1), new Date(2014, 7, 31, 12, 59, 59));

		//重新赋值（选中区域）
		dateSilderObj.dateRangeSlider("values", new Date(2014, 2, 23), new Date(2014, 5, 23));

		
		//拖动完毕后的事件
		dateSilderObj.bind("valuesChanged", function(e, data){
			var val=data.values;
			var stime=val.min.getFullYear()+"-"+(val.min.getMonth()+1)+"-"+val.min.getDate();
			var etime=val.max.getFullYear()+"-"+(val.max.getMonth()+1)+"-"+val.max.getDate();
		  	console.log("起止时间："+stime+" 至 "+etime);
		});

		
	}
	
   </script> 
</head>

<body>
   
    <br/>
    <br/>
    <br/>

<!-- 时间轴 -->
	<div class="dateSlider" id="dateSlider" style="width:970px; height:40px;">&nbsp;</div>
<!-- 时间轴 -->

</body>
</html>
